<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>fullscreen</title>
	<style>
		html:-moz-full-screen{
			background: red;
		}
		html:-webkit-full-screen{
			background: url(./casebg.jpg) no-repeat;
			width: 3360px;
			height: 1856px;
			background-size: 100% 100%;
			overflow: hidden;
		}
		html:fullscreen{
			background: url(./casebg.jpg) no-repeat;
			width: 3360px;
			height: 1856px;
			background-size: 100% 100%;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<input type="button" id="btn" value="页面全屏显示" onclick="toggleFull()">
	
	<script>
	//elem.requestFullscreen(); 进入全屏
	//document.exitFullscreen();  退出全屏 exitFullscreen 只能通过 document 对象调用 —— 而不是使用普通的 DOM element
	//fullscreenchange(); 监听改变

	function requestFullscreen(elem) {
		if(elem.requestFullscreen) {
			elem.requestFullscreen();
		} else if (elem.webkitRequestFullScreen) {
			elem.webkitRequestFullScreen();
		} else if (elem.mozRequestFullScreen){
			elem.mozRequestFullScreen();
		}
	}

	function exitFullscreen(elem) {
		if(elem.exitFullscreen) {
			elem.exitFullscreen();
		} else if (elem.webkitCancelFullScreen) {
			elem.webkitCancelFullScreen();
		} else if (elem.mozCancelFullScreen){
			elem.mozCancelFullScreen();
		}
	}

	var fullBtn = document.querySelector("#btn");

	function toggleFull() {
		if(fullBtn.value == "页面全屏显示") {
			requestFullscreen(document.documentElement);
			fullBtn.value = "退出全屏显示";
		} else {
			fullBtn.value = "页面全屏显示";
			exitFullscreen(document);
		}
	}
	</script>
</body>
</html>